<template>
    <div class="box">
        <van-tabs v-model="active" :line-width=60 swipeable @click="tabClick" sticky>
           <van-tab v-for="(item,index) in tabs" :title="item.value" :key="index">
              <div slot="title" v-if="lang=='zh' ">
                  <div  id="tab-txt" v-if="index==0">置换交易 <span v-if="eNewMsg>0">{{eNewMsg}}</span></div>
                  <div  id="tab-txt" v-else >购买交易 <span v-if="bNewMsg>0">{{bNewMsg}}</span></div>
              </div>
              <div slot="title" v-else>
                  <div  class="en-tab en-tab1" id="tab-txt" v-if="index==0"> Replacement transaction<span v-if="eNewMsg>0">{{eNewMsg}}</span></div>
                  <div  class="en-tab en-tab2" id="tab-txt" v-else > Purchase transaction<span v-if="bNewMsg>0">{{bNewMsg}}</span></div>
              </div>
          </van-tab>
        <div>   
            <exchange v-if="active==0" ref="exchange" @upDate="upEventE"></exchange>
            <buy      v-if="active==1" ref="buy" @upDate="upEventB"></buy>
          </div>
        </van-tabs>
    
    </div>
</template>

<script>
import { Tab, Tabs, Loading } from "vant";
import exchange from "./components/exchange"; //置换交易
import buy from "./components/buy"; //购买交易

export default {
  name: "order",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Loading.name]: Loading,
    exchange,
    buy,
  },
  //声明组件
  data() {
    return {
      lang:'zh',//当前网页语言类型 zh 中文  en 英语 
      tabs: [{type:1,value:"置换交易"}, {type:2,value:"购买交易"},],
      active:0,//当前tabs索引 默认0
      type:1,//类型：1置换交易、2购买交易 (通过tabs的索引计算得出)
      eNewMsg:0,//置换交易最新消息数目
      bNewMsg:0,//购买交易最新消息数目
    };
  },
  //实例创建完成后被立即调用
  created() {
    //获得status 
    if(this.$route.query.status) {
      this.active = this.$route.query.status;
    }
    //获得语言类型lang
    if(this.$route.query.lang) {
        this.lang = this.$route.query.lang;
    }
  },
  methods: {
      //点击tabs切换数据
      tabClick(index, title) {
          // console.log(index,title);
          this.active = index;
      },
      //接收购买子组件数据
      upEventB(data){
        // console.log(data);
        this.bNewMsg = data;
      },
      //接收置换子组件数据
      upEventE(data){
        // console.log(data);
        this.eNewMsg = data;
      },
  }
};
</script>

<style lang="stylus" scoped>
.box{
   min-height :100%;
   background: #f5f5f5;
   
}
.van-tab--active {
  color: inherit;
}
.van-tabs__line {
  z-index: 1;
  left: 0;
  bottom: 15px;
  height: 2px;
  position: absolute;
  background-color: #1c90ff;
}
.van-tab { 
  div{
    div{
       #tab-txt{
          position : relative !important;
          span{
            position: absolute !important;
            left: 66%;
            top: 20%;
            background:#ff2943;
            width:.373333rem;
            height:.373333rem;
            text-align :center;
            line-height :.38rem;
            border-radius:100%;
            font-family:PingFangSC-Regular;
            font-size:.24rem;
            color:#ffffff;
          }
      }
      #tab-txt.en-tab{
        position : relative !important;
        span{
          position: absolute !important;
         
          top: 20%;
          left: 91.8%;
          background:#ff2943;
          width:.373333rem;
          height:.373333rem;
          text-align :center;
          line-height :.373333rem;
          border-radius:100%;
          font-family:PingFangSC-Regular;
          font-size:.24rem;
          color:#ffffff;
       }
      }
      #tab-txt.en-tab2{
         span{
           left: 85%;
         }
      }
    }
  }    
}
@media screen and (max-width :320px) {
  .van-tab div div #tab-txt span{
       left: 68%;
  }
  .van-tab div div #tab-txt.en-tab span{
        left: 94%;
  }
   .van-tab div div #tab-txt.en-tab2 span{
      
       left: 89%;
  }
}
</style>